<template>
	<view class="page-content">
		<view  :style="'background: url('+topBg+') no-repeat center center/cover;'">
			<view class="top-bar flex-center p-md">
				<text class="top-bar_title">{{ top_title }}</text>
				<u-subsection class="m-t-md" :list="currentList" activeColor="#fff" :current="currentType" style="border-radius: 25px;" @change="change"></u-subsection>
			</view>
			<view class="ranking-top p-md ">
				<view class="ranking-top_item flex-center two rel" v-if="rankingTop[1]">
					<image class="ranking-top__image abs" mode="widthFix" src="/static/images/ranking-2.png"></image>
					<view class="ranking-top__border two">
						<u-avatar :src="rankingTop[1].avatar" size="66"></u-avatar>
					</view>
					<view class="ranking-top__info two m-t-xs flex-center">
						<view class="shadow"></view>
						<text>
							{{ rankingTop[1].username }}
						</text>
						<text class="text-xs number">
							完成 {{ rankingTop[1].task_order_count }} 单
						</text>
					</view>
				</view>
				<view class="ranking-top_item flex-center one rel" v-if="rankingTop[0]">
					<image class="ranking-top__image one abs" mode="widthFix" src="/static/images/ranking-1.png"></image>
					<view class="ranking-top__border one">
						<u-avatar :src="rankingTop[0].avatar" size="66"></u-avatar>
					</view>
					<view class="ranking-top__info one m-t-xs flex-center">
						<text>
							{{ rankingTop[0].username }}
						</text>
						<text class="text-xs number">
							完成 {{ rankingTop[0].task_order_count }} 单
						</text>
					</view>
				</view>
				<view class="ranking-top_item flex-center three rel" v-if="rankingTop[2]">
					<image class="ranking-top__image abs" mode="widthFix" src="/static/images/ranking-3.png"></image>
					<view class="ranking-top__border three">
						<u-avatar :src="rankingTop[2].avatar" size="66"></u-avatar>
					</view>
					<view class="ranking-top__info three m-t-xs flex-center">
						<view class="shadow"></view>
						<text>
							{{ rankingTop[2].username }}
						</text>
						<text class="text-xs number">
							完成 {{ rankingTop[2].task_order_count }} 单
						</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="ranking-list section-bg p-md" v-if="rankingList">
			<view class="ranking-list_item p-t-sm p-b-sm flex-between" v-for="(item, index) in rankingList" :key="item.uid">
				<view class="flex-start">
					<text class="ranking-list__number">{{ index += 4 }}</text>
					<u-avatar :src="item.avatar" size="36" class="m-l-sm m-r-sm"></u-avatar>
					<text class="text-md">{{ item.username }}</text>
				</view>
				<view class="text-md">
					<text class="number">完成 {{ item.task_order_count }} 单</text>
				</view>
			</view>
		</view>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop" :backShow="true"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				top_title: '排行榜',
				rankingTop:[],
				rankingList:[],
				scrollTop:0,
				switchs:[{
					id: 1,
					name: '今天',
				},{
					id: 2,
					name: '昨天',
				},{
					id: 3,
					name: '本月',
				}],
				currentList:['今天', '昨天', '本月'],
				currentType:0,
				params:{
					type: 1,
					start_time: '',
					end_time: ''
				},
				topBg: require('@/static/images/ranking-top-bg.png'),
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			
		}),
		watch:{
			currentType(newValue, oldValue){
				this.switchHandle()
			}
		},
		onLoad(){
			this.getRanking()
			if(  this.configInfo.ranking_title ){
				this.top_title =  this.configInfo.ranking_title
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			async getRanking(){
				let {
					params
				} = this
				const res = await this.$api.user.getUserRanking(params);
				if(res.code == 200){
					let top = 3;
					let data = res.data
					for (let i = 0; i < top; i++) {
						this.rankingTop[i] = data[i]
					}
					// data.splice(0,3);
					this.rankingList = data.splice(0,3)
				}
				this.rankingList = res.data
				console.log(res);
			},
			
			change( index ){
				this.currentType = index
			},
			
			async switchHandle(){
				let d = new Date();
				let key = this.currentType
				switch (key += 1){
					case 1:
						this.params.start_time = this.params.end_time = ''
						break;
					case 2:
						d.setDate(d.getDate() - 1);
						this.params.start_time = new Date(d.toLocaleDateString()).getTime();
						this.params.end_time = new Date(d.toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1;
						break;
					case 3:
						let currentMonth = d.getMonth();//获得当前月份0-11 
					    let currentYear = d.getFullYear();//获得当前年份4位年 
					    this.params.start_time = new Date(new Date(currentYear, currentMonth, 1).setHours(0, 0, 0, 0)).getTime();//求出本月第一天    
					    if (currentMonth == 11) {//当为12月的时候年份需要加1 月份需要更新为0 也就是下一年的第一个月     
					        currentYear++;
					        currentMonth = 0;//就为0    
					    } else {//否则只是月份增加,以便求的下一月的第一天      8080
					        currentMonth++;
					    }
					    let millisecond = 1000 * 60 * 60 * 24;//一天的毫秒数   
					    let nextMonthDayOne = new Date(currentYear, currentMonth, 1); //下月的第一天    
					    this.params.end_time = new Date(new Date(nextMonthDayOne.getTime() - millisecond).setHours(0, 0, 0, 0)).getTime() + 86399999;//求出上月的最后一天    
						break;
					default:
						this.params.start_time = this.params.end_time = ''
						break;
						break;
				}
				await this.getRanking()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {
		font-family: 'ddjbt'; 
		src: url("~@/static/fonts/DDJBT.ttf") format('truetype');
		font-weight: bold;
	}
	page{
		background-color: #ff573e;
		background: linear-gradient(100deg, #ff573e, #ff573e50)!important;
	}
	.top-bar{
		flex-flow: column;
		&_title{
			color: #fff;
			font-weight: 600;
			font-size: 50rpx;
			font-family: ddjbt!important;
		}
		&_switch{
			background-color: #fff;
			border-radius: 25px;
			overflow: hidden;
			padding: 10rpx;
			// padding: 15rpx;
		}
		&_switch-item{
			position: relative;
			border-radius: 25px;
			font-size: 25rpx;
			color: #333;
			background-color: #fff;
			padding: 15rpx 25rpx;
			// transform: color .3s;
			transition: all 0.3s ease-in-out
		}
		&_switch-item::after{
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #000;
			border-radius: 25px;
		}
		&_switch-item.active::after{
			color: #fff;
			background-color: #000;
		}
	}
	.ranking-top{
		background-repeat: no-repeat!important;
		background-size: cover!important;
		display: flex;
		// background-color: #0096cc20;
		padding: 100rpx 50rpx;
		flex-wrap: nowrap;
		justify-content: center;
		&_item{
			flex-flow: column;
		}
		&_item.one{
			z-index: 1;
			top: -50rpx
		}
		&__image{
			width: 80rpx;
			height: 80rpx;
			z-index: 2;
			top: -30rpx;
			left: 20rpx;
		}
		&__image.one{
			top: -45rpx;
			left: 10rpx;
			width: 100rpx;
			height: 100rpx;
		}
		&__border{
			// display: inline-block;
			// width: 100%;
			border-radius: 100%;
			background-color: #f3f3f3;
			padding: 10rpx;
			z-index: 1;
		}
		&__border.one{
			background: linear-gradient(to right, #fdf6ca, #f5c97e)!important;
			box-shadow: 0 0 10px 3px #fdf6ca;
		}
		&__border.two{
			background: linear-gradient(to right, #d0eeee, #81afd0)!important;
			box-shadow: 0 0 10px 3px #d0eeee;
		}
		&__border.three{
			background: linear-gradient(to right, #dacdbd, #cf9b76)!important;
			box-shadow: 0 0 10px 3px #dacdbd;
		}
		&__info::before,&__info::after {
		  content: "";
		  position: absolute;
		  top: -20rpx;
		  width: 110rpx;
		  height: 20rpx;
		  background-color: #ccc;
		}
		&__info::before {
		  left: 10rpx;
		  transform: skew(-50deg);
		}
		&__info::after {
		  right: 10rpx;
		  transform: skew(50deg);
		}
		
		&__info.two::before,&__info.two::after {
			width: 120rpx;
		}
		&__info.two::before {
		  left: 10rpx;
		  transform: skew(-50deg);
		}
		&__info.two::after {
		  right: -15rpx;
		  transform: skew(-50deg);
		  z-index: -10;
		}
		&__info.two{
			transform: skew(5deg);
		}
		
		&__info.three::before,&__info.three::after {
			width: 120rpx;
		}
		&__info.three::before {
		  left: -10rpx;
		  transform: skew(50deg);
		}
		&__info.three::after {
		  right: 15rpx;
		  transform: skew(50deg);
		}
		&__info.three{
			transform: skew(-5deg);
		}
		&__info{
			// justify-content: f;
			padding-top: 25rpx;
			justify-content: flex-start;
			width: 210rpx;
			position: relative;
			margin-top: 10rpx!important;
			background-color: #fff;
			height: 230rpx;
			flex-flow: column;
		}
		&__info.three .shadow,&__info.two .shadow{
			width: 100%;
			height: 100%;
			top:0;
			position: absolute;
		}
		&__info.two .shadow::after{
			position: absolute;
			content: '';
			width: 30rpx;
			height: 150rpx;
			background-color: #ccc;
			top: -18rpx;
			right:-29rpx;
			transform: skew(0deg, -40deg);
		}
		&__info.three .shadow::after{
			position: absolute;
			content: '';
			width: 30rpx;
			height: 150rpx;
			background-color: #ccc;
			top: -18rpx;
			left:-29rpx;
			transform: skew(0deg, 40deg);
		}
	}
	.ranking-list{
		position: relative;
		margin-top: -200rpx;
		min-height: 75vh;
		z-index: 2;
		&_item{
			border-bottom: 1px solid var(--theme-line-four);
		}
		&_item:last-child{
			border-bottom: none;
		}
		&__number{
			width: 25px;
			font-weight: bold;
			color: #666;
			text-align: center;
		}
	}
	.number{
		color: #f29100
	}
	/deep/ .u-subsection{
		// border: 2px solid #ff573e10;
		box-shadow: 0 0 15px 5px #ffffff50;
		width: 80%;
		// padding: 15rpx;
		&__bar{
			background-color: #ff573e;
			border-radius: 25px!important;
		}
	}
</style>
